<template>
    <div>
		<div class="cp-header">
			<div class="cp-main-box">
				<a href="/" class="cp-logo">
					<!-- 主页logo -->
					<img src="../../public/img/logo.png">
				</a>
				<div class="layui-nav headerRight"  lay-filter="">
					<!-- 搜索框 -->
					<div class="cp-header-search">
						<input id="searchBox" @keyup="search" placeholder="可以搜索书名、作者哦！" v-model="searchContent">
						<a href="javascript:" class="iconfont icon-search"></a>
					</div>

					<div class="cp-header-link">
						<!-- 跳转充值页面 -->
						<a href="javascript:"></a>
						<a href="javascript:"></a>
						<a href="javascript:"></a>
						<a href="javascript:"></a>
						<a href="javascript:"></a>
					</div>
					<div class="cp-header-user" id="cpHeaderUser" v-show="!logged">
						<a href="/register">注册</a>
						<span></span>
						<a href="" @click.prevent="loginDialogVisible = true">登录</a>
					</div>
					<div class="layui-nav-item" id="userMsgBox" v-show="logged" style="">
						<!-- 跳转用户个人中心 -->
						<a href="/user/info">
							<i class="iconfont icon-dengpao"></i>
							<!-- 用户头像（可选） -->
							<img src="/img/default_head.png" class="layui-nav-img header">
							<!-- 用户名 -->
							<span class="userName cp-ellipsis" v-text="userName"></span>
							<!-- 更多 -->
							<span class="layui-nav-more"></span>
						</a>

						<dl class="layui-nav-child" id="userMsgChild">
							<dd>
								<a href="javascript:;">
									<i class="iconfont icon-tuichu"></i>
									退出
								</a>
							</dd>
						</dl>
					</div>
				</div>
			</div>
			<!-- 模态框 -->
			<el-dialog :close-on-click-modal="false" title="用户登录" :visible.sync="loginDialogVisible" width="20%">
				<el-form :model="loginForm" status-icon ref="ruleForm" label-width="0" class="demo-ruleForm">
					<el-form-item prop="tel">
						<el-input v-model.number="loginForm.userTel" placeholder="请输入电话"></el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input type="password" v-model="loginForm.password" autocomplete="off" placeholder="请输入密码"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="singIn">立即登录</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>
		</div>
		<div id="vueBox" class="cp-main-box">
			<div class="cp-over-hidden" style="margin-top: 20px;">
				<div class="cp-novel-index-info">
					<div class="cp-novel-cover">
						<img :src="bookInfo.image">
					</div>
					<div class="left" style="width: 636px;">
						<div class="cp-over-hidden" style="margin-top: 8px;">
							<h4 class="cp-novel-name cp-ellipsis">
								{{ bookInfo.bookName }}
								<span class="novelCpid">
									{{ bookInfo.authorName }}
								</span>
							</h4>
						</div>
						<div class="cp-novel-tags">
							<span class="cp-novel-type cp-novel-type-tr">同人</span>
							<span class="cp-novel-type ">{{ bookInfo.categoryName }}</span>
							<span v-if="bookInfo.status == 2" class="cp-novel-process cp-novel-process-1">完结</span>
							<span v-if="bookInfo.status == 1" class="cp-novel-process cp-novel-process-1">连载</span>
						</div>
						<div class="cp-novel-statistics">
							<div><span>收藏：</span> <b v-if="bookInfo.bookData.collection">{{ bookInfo.bookData.collection }}</b></div>
							<div><span>点击：</span> <b>{{ bookInfo.bookData.clickNumber }}</b></div>
							<div><span>字数：</span> <b>28.74万</b></div>
							<div><span>订阅：</span> <b>{{ bookInfo.bookData.subscribe }}</b></div>
						</div>
						<div class="cp-novel-desc">
							{{ bookInfo.description }}
						</div>
						<div class="cp-over-hidden" style="margin-top: 16px;">
							<a :href="'/read/' + bookInfo.bookId + '/' + bookInfo.chapterList[0].chapterId">
								<span class="cp-novel-index-btn-read cursor-pointer">
									点击阅读
								</span>
							</a>
							<div class="cp-novel-index-btn-handle">
								<a v-if="collected" href="javascript:;" class="iconfont icon-tuijian" @click="removeCollection">收藏</a>
								<a v-else href="javascript:;" class="iconfont icon-weishoucang" @click="insertCollection">收藏</a>
							</div>
						</div>
					</div>
				</div>

				<div class="left" style="width: 100%;">
					<div class="cp-card" style="margin-top: 14px; padding-bottom: 16px;">
						<div class="cp-card-header cp-card-header-bold"><span class="cp-card-header-line"></span>
							<h3>文章简介</h3> <span class="right" style="line-height: 24px; color: rgb(153, 153, 153);">2019-10-26 22:42:36</span>
						</div>
						<div class="cp-card-line"></div>
						<div class="cp-card-content1">
							<div id="description" class="cp-novel-index-novel-info">
								{{ bookInfo.description }}
							</div>
						</div>
						<!-- <div class="customTags"><a target="_blank" href="https://www.gongzicp.com/novel/search/novel/novel/keyword/%E6%90%9E%E7%AC%91"><span
							 class="cp-novel-tag">搞笑</span></a> <a target="_blank" href="https://www.gongzicp.com/novel/search/novel/novel/keyword/%E7%A9%BF%E8%B6%8A"><span
							 class="cp-novel-tag">穿越</span></a> <a target="_blank" href="https://www.gongzicp.com/novel/search/novel/novel/keyword/%E7%AB%B9%E9%A9%AC%E7%AB%B9%E9%A9%AC"><span
							 class="cp-novel-tag">竹马竹马</span></a> <a target="_blank" href="https://www.gongzicp.com/novel/search/novel/novel/keyword/HE"><span
							 class="cp-novel-tag">HE</span></a>
						 </div> -->
					</div>
					<div class="cp-card" style="margin-top: 14px;">
						<div class="cp-card-header cp-card-header-bold"><span class="cp-card-header-line"></span>
							<h3>章节目录</h3> <a href="javascript:;" class="more" style="display: none;">收起</a>
						</div>
						<div class="cp-card-line"></div>
						<div class="cp-card-content">
							<ul class="cp-novel-menu-list">
								<li class="cp-novel-menu-item" v-if="index < 13" v-for="(chapter, index) in bookInfo.chapterList" :key="index">
									<a :href="'/read/' + bookId + '/' + chapter.chapterId" class="cursor-pointer">
										<div>
											<span class="cp-novel-menu-order">{{ index + 1 }}</span>
											<span class="cp-novel-menu-name cp-ellipsis">{{ chapter.chapterName }}</span>
											<span class="right" style="width: 220px;">更新时间: {{ chapter.updateTime }}</span>
											<span class="right" style="width: 100px;">字数: {{ chapter.wordNumber }}</span>
										</div>
									</a>
								</li>
								<li class="cp-novel-menu-more" v-else-if="index == 13"><a href="javascript:;" @click.prevent="openList">&gt;&gt;点击展开目录列表&lt;&lt;</a></li>
								<li class="cp-novel-menu-item cp-hidden" v-else-if="index >= 13">
									<a :href="'/read/' + bookId + '/' + (+chapter.chapterId - 1)" class="cursor-pointer">
										<div>
											<span class="cp-novel-menu-order">{{ index }}</span>
											<span class="cp-novel-menu-name cp-ellipsis">{{ chapter.chapterName }}</span>
											<i class="iconfont icon-vip vip"></i>
											<span class="right" style="width: 220px;">更新时间: {{ chapter.updateTime }}</span>
											<span class="right" style="width: 100px;">字数: {{ chapter.wordNumber }}</span>
										</div>
									</a>
								</li>
							</ul>
						</div>
					</div>
					<div id="cpNovelComment" class="cp-card" style="margin-top: 14px;">
						<div class="cp-card-header cp-card-header-bold"><span class="cp-card-header-line"></span>
							<h3>评论专区</h3>
						</div>
						<div class="cp-card-line"></div>
						<div class="cp-card-content">
							<div class="cp-over-hidden" style="margin-top: 24px;">
								<div class="cp-novel-comment-form">
									<form onsubmit="return false;" id="cpNovelCommentForm">
										<div class="cp-novel-comment-content-input">
											<textarea @keyup="commentCheck" style="width: 1166px" v-model="commentContent" placeholder="给作者大大留评，4~300字">
												
											</textarea>
										</div>
										<div class="cp-over-hidden" style="width: 1166px">
											<button @click="insertComment" class="cp-novel-comment-submit-btn" style="margin-right: 0">
												发表评论
											</button>
										</div>
									</form>
								</div>

							</div>
							<div class="cp-comment-list">
								<div class="cp-comment-item" v-for="(comment, index) in bookInfo.commentList" :key="comment.commentId">
									<a class="cp-comment-user-head">
										<img src="/img/tx.jpg">
									</a>
									<div class="cp-over-hidden" style="margin-bottom: 8px;">
										<a href="javascript:"
										 class="cp-comment-user-name">
											{{ comment.userName }}
										 </a> 
										 <span class="cp-comment-content-name">
											 评论 {{ bookInfo.bookName }}  章节： {{ comment.chapterName }}
										 </span>
										<span title="2020-10-10 19:13:46" class="cp-comment-time right">
											{{ comment.commentDate }}
										</span>
									</div>
									<!---->
									<!---->
									<div class="cp-comment-content" style="overflow-wrap: break-word;">
										<p>
											{{ comment.commentContent }}
										</p>
									</div>
									<div>
										<span class="cp-comment-floor">第 {{ index + 1 }} 条鱼</span>
									</div>

								</div>
								<div id="page" style="text-align: center; margin-top: 20px;">

								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<Footer></Footer>
    </div>
</template>
<script>
import Footer from '../components/Footer'
import $ from 'jquery'

export default {
    name: 'Novel',
	components: {
    	Footer
	},
	mounted() {
		layui.use('element');
		this.initList();
		this.isCollected();
	},
    data() {
        return {
			// 评论内容
			commentContent: "",
			// 是否收藏
			collected: false,
			// 地址栏获取书籍id
			bookId: this.$route.params.id,
			// 登录模态框可见
			loginDialogVisible: false,
			// 登录表单
			loginForm: {
				userTel: "",
				password: ""
			},
			// 搜索内容
			searchContent: "",
			bookInfo: {}
        }
    },
	computed: {
		// 登录状态
		logged: function () {
			return (this.userName != null);
		},
		// 用户名
		userName: function () {
			return sessionStorage.getItem("userName");
		}
	},
    methods: {
		// 初始化
		initList() {
			let _this = this;
			$.ajax({
				url: "http://localhost/book/detail/" + _this.bookId,
				success: function(res) {
					// 判断响应码
					if (res.code != 200) {
						_this.$notify.error(res.message);
						return;
					}
					_this.bookInfo = res.data;
				}
			});
		},
		// 是否已收藏
		isCollected() {
			let _this = this;
			// 取出用户id
			let userId = sessionStorage.getItem("userId");
			// 判断是否已登录
			if(!userId) {
				return;
			}
			$.ajax({
				url: "http://localhost/collection/" + _this.bookId + "/" + userId,
				success: function(res) {
					_this.collected = res;
				}
			});
		},
        openList() {
            $(".cp-novel-menu-item").removeClass('cp-hidden');
            $(".cp-novel-menu-more").html('<h2>--以下为付费章节--</h2>')
		},
		// 搜索
		search() {

		},
		// 登录
		singIn() {
			let _this = this;
			$.ajax({
				url: "http://localhost/user/login",
				type: "POST",
				data: _this.loginForm,
				success: function (res) {
					// 判断响应码
					if (res.code != 200) {
						// 错误提示信息
						_this.$message.error(res.message);
						return;
					}
					// 登录成功提示信息
					_this.$message.success("登录成功");
					// 关闭模态框
					_this.loginDialogVisible = false;
					// 将返回数据存入session
					sessionStorage.setItem("userId", res.data.userId);
					sessionStorage.setItem("userName", res.data.userName);
					// 存入作者Id
					if (res.data.authorId != null) {
						sessionStorage.setItem("authorId", res.data.authorId);
					}
					// 刷新
					location.reload();
				}
			});
		},
		// 注销
		logout() {
        	sessionStorage.clear();
        	location.reload();
		},
		// 添加收藏
		insertCollection() {
			let _this = this;
			// 取出用户id
			let userId = sessionStorage.getItem("userId");
			// 判断是否已登录
			if(!userId) {
				this.$message("请登录");
				// 打开模态框
				this.loginDialogVisible = true;
				return;
			}
			$.ajax({
				url: "http://localhost/collection/" + _this.bookId + "/" + userId,
				type: "POST",
				success: function(res) {
					if (res.code != 200) {
						_this.$notify.error("操作失败，请稍后再试");
						return;
					}
					_this.collected = true;
					_this.$notify.success("操作成功");
				}
			});
		},
		// 取消收藏
		removeCollection() {
			let _this = this;
			// 取出用户 id
			let userId = sessionStorage.getItem("userId");
			$.ajax({
				url: "http://localhost/collection/" + _this.bookId + "/" + userId,
				type: "DELETE",
				success: function(res) {
					if (res.code != 200) {
						_this.$notify.error("操作失败，请稍后再试");
						return;
					}
					_this.collected = false;
					_this.$notify.success("操作成功");
				}
			});
		},
		// 校验评论内容
		commentCheck() {
			if(this.commentContent == "" || this.commentContent == null ||
			 this.commentContent.length < 4 || this.commentContent.length > 300) {
				this.$notify.warning("4 - 300 字");
				return false;
			}
			return true;
		},
		// 发表评论
		insertComment() {
			// 校验内容
			if (!this.commentCheck()) {
				return;
			}
			// 全站匿名评价，不必判断是否登录
			let _this = this;
			$.ajax({
				url: "http://localhost/comment",
				type: "POST",
				data: {
					"bookId": _this.bookId,
					"commentContent": _this.commentContent,
					// 默认评价最后一章节
					"chapterId": _this.bookInfo.commentList.length
				},
				success: function(res) {
					if (res.code != 200) {
						_this.$notify.error("操作失败，请稍后再试");
						return;
					}
					_this.$notify.success("操作成功");
				}
			});
		}
    }
}
</script>
<style>
    .opened {
		height: auto;
	}
    .toggle .close,.opened .toggle .open {
		display: none;
	}
    .toggle .opened,.opened .toggle .close{
		display: inline;
	}
	.el-button {
		background-color:#51c29a;
		border: #51c29a 1px solid;
		width: 100%;
		border-radius: 3px;
	}
	.el-button:hover {
		background-color:#7adbbb;
		border: #7adbbb solid 1px;
	}
	.loginBoxTitle {
		bottom: 20px;
	}
</style>